<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>
			1. 如果想传递事件对象的时候，不需要传递普通参数，直接在事件处理程序位置直接使用 event 对象即可
			2. 如果传递事件对象的时候，还传递了其他参数，这时候，需要把事件对象使用 $event 手动传递，并且需要放到其他参数最后面
		</pre
		>

		<div id="app">
			<!-- 普通参数传递：将函数名称改为函数调用，在括号中传递参数即可 -->
			<button @click="handle(1)">按钮1</button>

			<!-- 事件对象传递：将函数名称改为函数调用，如果同时也传递了参数，事件对象$event,放到参数最后 -->
			<button @click="handle(1, 2, $event)">按钮2</button>

			<!-- 如果没有传递任何参数，如何获取事件对象 -->
			<button @click="handle1">按钮3</button>
		</div>

		<script src="/scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					age: 3,
				},
				methods: {
					handle(param1, param2, e) {
						console.log(param1, param2)
						console.log(e)
					},
					handle1(e) {
						console.log(e)
					},
				},
			})
		</script>
	</body>
</html>
